<template>
  <div class="message" v-title data-title="个人中心">
    <div class="top-header"></div>
    <div class="security_content">
      <div class="security">
        <span class="security-title"></span>
        <el-tabs
          tab-position="left"
          v-model="active"
          @tab-click="handleClick"
          style="min-height: 500px"
        >
          <el-tab-pane label="个人信息" name="0">
            <div
              class="userInfo"
              style="
                width: 90%;
                border: solid 1px #c0c0f1;
                padding: 0 2.5%;
                margin-bottom: 30px;
              "
            >
              <div class="titleInfo">
                <div class="titleInfoTitle">
                  <el-dialog
                    title="请编辑您的昵称"
                    :visible.sync="titleVisable"
                    width="30%"
                    :before-close="handleNicknameClose"
                    center
                  >
                    <el-form
                      :model="nickname"
                      status-icon
                      :rules="rules"
                      ref="nickname"
                    >
                      <el-form-item
                        label="昵称"
                        label-width="100px"
                        prop="nicknameTemp"
                      >
                        <el-col :span="18">
                          <el-input
                            type="text"
                            placeholder="请输入您的昵称"
                            v-model="nickname.nicknameTemp"
                          />
                        </el-col>
                      </el-form-item>
                    </el-form>
                    <div style="text-align: center">
                      <el-button
                        type="primary"
                        @click="nicknameSave('nickname')"
                      >
                        确 定
                      </el-button>
                    </div>
                  </el-dialog>
                </div>
                <div class="titleInfoInner">
                  <chAvatar />
                  <div class="userTitle">
                    <span
                      style="padding-left: 0px; font-size: 26px; width: 10%"
                    >
                      {{ user.nickname }}
                      <el-button
                        type="text"
                        style="margin-left: 5px; padding-top: 5px"
                        @click="
                          titleVisable = true;
                          nickname.nicknameTemp = user.nickname;
                        "
                      >
                        <i class="el-icon-edit-outline" />编辑
                      </el-button>
                    </span>
                    <br />
                  </div>
                  <!-- <div
                    style="
                      display: inline-block;
                      margin: 0 30px;
                      text-align: left;
                      font-weight: 700;
                      line-height: 18px;
                      font-size: 18px;
                      vertical-align: middle;
                    "
                  >
                    <el-link
                      href=""
                      style="padding-left: 50px; padding-right: 50px"
                      :underline="false"
                      target="_blank"
                    >
                      <p
                        style="margin: 5px; text-align: center; font-size: 15px"
                      >
                        关注数
                      </p>
                      <p style="margin: 5px; text-align: center">
                        {{ user.concernNum }}
                      </p>
                    </el-link>
                    <el-link href="" :underline="false" target="_blank">
                      <p
                        style="margin: 5px; text-align: center; font-size: 15px"
                      >
                        粉丝数
                      </p>
                      <p style="margin: 5px; text-align: center">
                        {{ user.fansNum }}
                      </p>
                    </el-link>
                  </div> -->
                  <!-- <div class="userScore">
                    <span style="text-align: left; font-size: 20px">
                      评分:
                      <span style="font-size: 50px">
                        {{ user.score }}
                      </span>
                    </span>
                  </div> -->
                </div>
              </div>
              <div class="accountInfo" style="margin-top: 10px">
                <template>
                  <el-descriptions
                    class="margin-top"
                    title="账号信息"
                    :column="2"
                    size="medium"
                    border
                    style="font-size: 20px"
                  >
                    <el-descriptions-item>
                      <template slot="label"> 用户名 </template>
                      {{ user.name }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 手机号 </template>
                      {{ user.phoneNumber }}
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </div>
              <div class="basicInfo" style="margin-top: 10px">
                <el-dialog
                  title="请编辑您的基本信息"
                  :visible.sync="basicVisable"
                  width="60%"
                  :before-close="handleBasicClose"
                  center
                >
                  <div class="basicDialog" style="margin-left: 2%">
                    <el-form
                      :model="basicInfoTemp"
                      status-icon
                      :rules="rules"
                      ref="basicInfoTemp"
                    >
                      <el-form-item
                        label="姓名"
                        label-width="60px"
                        prop="realNameTemp"
                      >
                        <el-col :span="18">
                          <el-input
                            type="text"
                            @input="realNameInput"
                            placeholder="请输入您的真实姓名"
                            v-model="basicInfoTemp.realNameTemp"
                            style="width: 120%"
                          />
                        </el-col>
                      </el-form-item>
                      <el-form-item
                        label="性别"
                        label-width="60px"
                        prop="sexTemp"
                      >
                        <el-col :span="18">
                          <el-select
                            v-model="basicInfoTemp.sexTemp"
                            placeholder="请选择您的性别"
                            style="width: 120%"
                          >
                            <el-option
                              v-for="item in sexOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </el-col>
                      </el-form-item>
                      <el-form-item
                        label="邮箱"
                        label-width="60px"
                        prop="emailTemp"
                      >
                        <el-col :span="18">
                          <el-input
                            type="text"
                            placeholder="请输入您的邮箱"
                            v-model="basicInfoTemp.emailTemp"
                            style="width: 120%"
                          />
                        </el-col>
                      </el-form-item>
                      <el-form-item
                        label="所在地"
                        label-width="60px"
                        prop="locationTemp"
                      >
                        <el-col :span="18">
                          <el-input
                            type="text"
                            placeholder="请输入您的所在地"
                            v-model="basicInfoTemp.locationTemp"
                            style="width: 120%"
                          />
                        </el-col>
                      </el-form-item>
                      <el-form-item
                        label="生日"
                        label-width="60px"
                        prop="birthdayTemp"
                      >
                        <el-date-picker
                          v-model="basicInfoTemp.birthdayTemp"
                          type="date"
                          placeholder="请选择您的出生日期"
                          value-format="yyyy-MM-dd"
                          style="width: 90%"
                          :editable="false"
                        >
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item
                        label="年龄"
                        label-width="60px"
                        prop="ageTemp"
                      >
                        <el-col :span="18">
                          <el-input
                            type="text"
                            @input="ageInput"
                            placeholder="请输入您的年龄"
                            v-model="basicInfoTemp.ageTemp"
                            style="width: 120%"
                          />
                        </el-col>
                      </el-form-item>
                      <el-form-item
                        label="简介"
                        label-width="60px"
                        prop="elucidationTemp"
                      >
                        <el-col :span="18">
                          <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入您的简介"
                            v-model="basicInfoTemp.elucidationTemp"
                            style="width: 127.5%"
                            resize="none"
                          >
                          </el-input>
                        </el-col>
                      </el-form-item>
                    </el-form>
                    <div
                      style="
                        margin-top: 10px;
                        margin-left: auto;
                        text-align: center;
                      "
                    >
                      <el-button
                        type="primary"
                        size="middle"
                        @click="basicInfoSave('basicInfoTemp')"
                      >
                        保 存
                      </el-button>
                    </div>
                  </div>
                </el-dialog>
                <template>
                  <el-descriptions
                    class="margin-top"
                    title="基本信息"
                    :column="3"
                    size="medium"
                    border
                    style="font-size: 20px"
                  >
                    <template slot="extra">
                      <el-button
                        style="
                          margin-top: 0px;
                          margin-right: 15px;
                          font-size: 15px;
                        "
                        size="small"
                        type="text"
                        @click="chBasicInfo"
                      >
                        <i class="el-icon-edit-outline" />编辑
                      </el-button>
                    </template>
                    <el-descriptions-item>
                      <template slot="label"> 姓 名 </template>
                      {{ user.realName }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 性 别 </template>
                      {{ user.sex }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 邮 箱 </template>
                      {{ user.email }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 地 址 </template>
                      {{ user.location }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 生 日 </template>
                      {{ user.birthday }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 年 龄 </template>
                      {{ user.age }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 简 介 </template>
                      {{ user.elucidation }}
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </div>
              <div class="eduInfo" style="margin-top: 10px; text-align: left">
                <el-dialog
                  title="请编辑您的教育信息"
                  :visible.sync="eduVisable"
                  width="40%"
                  :before-close="handleEduClose"
                  center
                >
                  <div style="margin-left: 10%">
                    <el-form
                      :model="eduInfoTemp"
                      status-icon
                      :rules="rules"
                      ref="eduInfoTemp"
                      style="margin: 0 auto"
                    >
                      <el-form-item
                        label="学校"
                        label-width="70px"
                        prop="schoolTemp"
                      >
                        <el-col :span="18">
                          <el-input
                            type="text"
                            @input="schoolInput"
                            placeholder="请输入您的学校"
                            v-model="eduInfoTemp.schoolTemp"
                          />
                        </el-col>
                      </el-form-item>
                      <el-form-item
                        label="专业"
                        label-width="70px"
                        prop="majorTemp"
                      >
                        <el-col :span="18">
                          <el-input
                            type="text"
                            @input="majorInput"
                            placeholder="请输入您的专业"
                            v-model="eduInfoTemp.majorTemp"
                          />
                        </el-col>
                      </el-form-item>
                      <el-form-item
                        label="入学年份"
                        label-width="70px"
                        prop="enrollYearTemp"
                      >
                        <el-date-picker
                          v-model="eduInfoTemp.enrollYearTemp"
                          type="year"
                          style="width: 75%"
                          value-format="yyyy"
                          placeholder="选择您的入学年份"
                          :editable="false"
                        >
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item
                        label="学历"
                        label-width="70px"
                        prop="eduBackGroundTemp"
                      >
                        <el-select
                          style="width: 75%"
                          v-model="eduInfoTemp.eduBackGroundTemp"
                          placeholder="请选择您的学历"
                        >
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div style="margin-top: 10px; text-align: center">
                    <el-button
                      type="primary"
                      size="middle"
                      @click="eduInfoSave('eduInfoTemp')"
                    >
                      保 存
                    </el-button>
                  </div>
                </el-dialog>
                <template>
                  <el-descriptions
                    class="margin-top"
                    title="教育信息"
                    :column="2"
                    size="medium"
                    border
                    style="font-size: 20px"
                  >
                    <template slot="extra">
                      <el-button
                        style="
                          margin-top: 0px;
                          margin-right: 15px;
                          font-size: 15px;
                        "
                        size="small"
                        type="text"
                        @click="chEduInfo"
                      >
                        <i class="el-icon-edit-outline" />编辑
                      </el-button>
                    </template>
                    <el-descriptions-item>
                      <template slot="label"> 学 校 </template>
                      {{ user.school }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 专 业 </template>
                      {{ user.major }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 入学年份 </template>
                      {{ user.enrollYear }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 学 历 </template>
                      {{ user.eduBackGround }}
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </div>
              <!-- <div class="interInfo" style="margin-top: 10px; text-align: left">
                <div class="interInfoTitle">兴趣标签</div>
                <div
                  class="interInfoInner"
                  style="margin: 10px; margin-left: 12%"
                >
                  <span style="padding-left: 10px">
                    兴趣标签1
                    <span style="padding-left: 20px">
                      {{ user.label1 }}
                    </span>
                  </span>
                  <span style="padding-left: 10px">
                    兴趣标签2
                    <span style="padding-left: 20px">
                      {{ user.label2 }}
                    </span>
                  </span>
                </div>
              </div> -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="购物车" name="1">
            <shopCar :id="this.user.userId"></shopCar>
          </el-tab-pane>
          <el-tab-pane label="我的订单" name="2">
            <order :id="this.user.userId" />
          </el-tab-pane>
          <el-tab-pane label="我的收藏" name="3">
            <myLove :id="this.user.userId" />
          </el-tab-pane>
          <el-tab-pane label="浏览历史" name="4">
            <feet :id="this.user.userId" />
          </el-tab-pane>
          <el-tab-pane label="收货信息" name="5">
            <div>
              <div class="addressTable">
                <el-table
                  ref="singleTable"
                  :data="addressInformation"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  max-height="250"
                  style="
                    font-size: 20px;
                    width: 90%;
                    margin-top: 10px;
                    margin-left: 5%;
                    margin-bottom: 1%;
                  "
                >
                  <el-table-column
                    property="grName"
                    label="收货人姓名"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    property="grPhone"
                    label="收货人电话"
                    width="150"
                  >
                  </el-table-column>
                  <el-table-column label="收货地址">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.grProvinces }}{{ scope.row.grCity
                        }}{{ scope.row.grPrefecture
                        }}{{ scope.row.grSpecificAddr }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="90">
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        @click="chAddress(scope.row)"
                        type="text"
                        style=""
                      >
                        修改
                      </el-button>
                      <el-popconfirm
                        class="del"
                        icon="el-icon-info"
                        icon-color="red"
                        title="确定删除该地址?"
                        @confirm="removeAddress(scope.$index, scope.row)"
                      >
                        <el-button
                          style="margin-left: 15px"
                          size="small"
                          type="text"
                          slot="reference"
                        >
                          删除
                        </el-button>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-button
                style="float: right; margin-right: 10%"
                @click="addAddressVisable = true"
                type="primary"
              >
                新增地址
              </el-button>
              <el-dialog
                title="请修改您的收货信息"
                :visible.sync="chAddressVisable"
                width="50%"
                :before-close="handleChAddressClose"
                center
              >
                <el-form
                  :model="chAddressInfoTemp"
                  status-icon
                  :rules="rules"
                  ref="chAddressInfoTemp"
                  style="margin-left: 10%"
                >
                  <el-form-item
                    label="收货人姓名"
                    label-width="120px"
                    prop="grNameTemp"
                    style="text-align: left"
                  >
                    <el-col :span="18">
                      <el-input
                        type="text"
                        placeholder="请输入您的收货人姓名"
                        v-model="chAddressInfoTemp.grNameTemp"
                      />
                    </el-col>
                  </el-form-item>
                  <el-form-item
                    label="收货人电话"
                    label-width="120px"
                    prop="grPhoneTemp"
                    style="text-align: left"
                  >
                    <el-col :span="18">
                      <el-input
                        type="text"
                        @input="chGrPhoneInput"
                        placeholder="请输入您的收货人电话"
                        v-model="chAddressInfoTemp.grPhoneTemp"
                      />
                    </el-col>
                  </el-form-item>
                  <el-form-item
                    label="所在地区"
                    label-width="120px"
                    prop="location"
                    style="text-align: left"
                  >
                    <el-cascader
                      v-model="chAddressInfoTemp.location"
                      :options="locationTree"
                      style="width: 75%"
                    >
                    </el-cascader>
                  </el-form-item>
                  <el-form-item
                    label="详细地址"
                    label-width="120px"
                    prop="grSpecificAddrTemp"
                    style="text-align: left"
                  >
                    <el-col :span="18">
                      <el-input
                        type="text"
                        placeholder="请输入详细的收货地址"
                        v-model="chAddressInfoTemp.grSpecificAddrTemp"
                      />
                    </el-col>
                  </el-form-item>
                  <div
                    style="margin-top: 10px; margin-left: 40%; text-align: left"
                  >
                    <el-button
                      type="primary"
                      size="middle"
                      @click="chAddressSave('chAddressInfoTemp')"
                    >
                      保 存
                    </el-button>
                  </div>
                </el-form>
              </el-dialog>
            </div>
            <el-dialog
              title="请填写您的收货信息"
              :visible.sync="addAddressVisable"
              width="40%"
              :before-close="handleAddAddressClose"
              center
            >
              <div>
                <el-form
                  :model="addAddressInfoTemp"
                  status-icon
                  :rules="rules"
                  ref="addAddressInfoTemp"
                  style="margin-left: 2%; width: 100%"
                >
                  <div>
                    <el-form-item
                      label="收货人姓名"
                      label-width="120px"
                      prop="grNameTemp"
                      style="text-align: left"
                    >
                      <el-col :span="18">
                        <el-input
                          type="text"
                          placeholder="请输入您的收货人姓名"
                          v-model="addAddressInfoTemp.grNameTemp"
                          style="width: 100%"
                        />
                      </el-col>
                    </el-form-item>
                    <el-form-item
                      label="收货人电话"
                      label-width="120px"
                      prop="grPhoneTemp"
                      style="text-align: left"
                    >
                      <el-col :span="18">
                        <el-input
                          type="text"
                          @input="grPhoneInput"
                          placeholder="请输入您的收货人电话"
                          v-model="addAddressInfoTemp.grPhoneTemp"
                          style="width: 100%"
                        />
                      </el-col>
                    </el-form-item>
                    <el-form-item
                      label="所在地区"
                      label-width="120px"
                      prop="location"
                      style="text-align: left"
                    >
                      <el-cascader
                        v-model="addAddressInfoTemp.location"
                        :options="locationTree"
                        style="width: 75%"
                      >
                      </el-cascader>
                    </el-form-item>
                    <el-form-item
                      label="详细地址"
                      label-width="120px"
                      prop="grSpecificAddrTemp"
                      style="text-align: left"
                    >
                      <el-col :span="18">
                        <el-input
                          type="text"
                          placeholder="请输入详细的收货地址"
                          v-model="addAddressInfoTemp.grSpecificAddrTemp"
                          style="width: 100%"
                        />
                      </el-col>
                    </el-form-item>
                  </div>
                </el-form>
                <div
                  style="margin-top: 10px; margin-left: 30%; text-align: left"
                >
                  <el-button
                    size="middle"
                    style="margin-right: 10%"
                    @click="resetForm('addAddressInfoTemp')"
                  >
                    重 置
                  </el-button>
                  <el-button
                    type="primary"
                    size="middle"
                    @click="addAddressSave('addAddressInfoTemp')"
                  >
                    保 存
                  </el-button>
                </div>
              </div>
            </el-dialog>
          </el-tab-pane>
          <el-tab-pane label="我的钱包" name="6">
            <recharge />
          </el-tab-pane>
          <el-tab-pane label="账号设置" name="7">
            <accountSetting />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import shopCar from "../../components/MessagePage/ShopCar.vue";
import order from "../../components/MessagePage/Order.vue";
import feet from "../../components/MessagePage/Feet.vue";
import myLove from "../../components/MessagePage/MyLove.vue";
import chAvatar from "../../components/MessagePage/ChAvatar.vue";
import addressTree from "../../components/MessagePage/AddressTree";
import recharge from "../../components/MessagePage/RechargeCenter.vue";
import accountSetting from "../../components/MessagePage/AccountSetting.vue";
import api from "../../api";
import base from "../../api/base";
import { mapState } from "vuex";
import { mapMutations } from "vuex";
export default {
  components: {
    shopCar,
    order,
    feet,
    myLove,
    chAvatar,
    recharge,
    accountSetting,
  },
  data() {
    var validateNickname = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入您的昵称!"));
      } else if (value.length > 15) {
        callback(new Error("昵称过长,请限制在15个字符以内!"));
      } else {
        callback();
      }
    };
    var validateRealName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入您的真实姓名!"));
      } else {
        callback();
      }
    };
    var validateSex = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择您的性别!"));
      } else {
        callback();
      }
    };
    var validateEmail = (rule, value, callback) => {
      var reg = new RegExp(
        "^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$"
      );
      if (value === "") {
        callback(new Error("请输入您的邮箱!"));
      } else if (!reg.test(value)) {
        callback(new Error("输入的邮箱格式错误!"));
      } else {
        callback();
      }
    };
    var validateLocation = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("请输入您的所在地!"));
      } else {
        callback();
      }
    };
    var validateBirthday = (rule, value, callback) => {
      if (value == null) {
        callback(new Error("请选择您的出生日期!"));
      } else {
        callback();
      }
    };
    var validateAge = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入您的年龄!"));
      } else if (value == "0") {
        callback(new Error("年龄不能为0!"));
      } else if (value - 0 > 100) {
        callback(new Error("年龄不能为大于100!"));
      } else {
        callback();
      }
    };
    var validateElucidation = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入您的简介!"));
      } else {
        callback();
      }
    };
    var validateSchool = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入您的学校!"));
      } else {
        callback();
      }
    };
    var validateMajor = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入您的专业!"));
      } else {
        callback();
      }
    };
    var validateEnrollYear = (rule, value, callback) => {
      if (value === null) {
        callback(new Error("请选择您的入学年份!"));
      } else {
        callback();
      }
    };
    var validateEduBackGround = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择您的学历!"));
      } else {
        callback();
      }
    };
    var validateGrName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入您的收货人姓名!"));
      } else {
        callback();
      }
    };
    var validateGrPhone = (rule, value, callback) => {
      const reg =
        /^0?(13[0-9]|15[012356789]|18[0-9]|14[578]|16[6]|17[035768]|19[19])[0-9]{8}$/;
      if (value === "") {
        callback(new Error("请输入您的收货人电话!"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入合法的手机号!"));
      } else {
        callback();
      }
    };
    var validateLocationr = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择收货所在地!"));
      } else {
        callback();
      }
    };
    var validateGrSpecificAddr = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入详细的收货地址!"));
      } else {
        callback();
      }
    };
    return {
      /*进入主页，以json格式返回个人信息：
      （标题信息）昵称、头像、关注数(concernNum)、粉丝数（fansNum）、评分(score)
      （账号信息）用户名、手机号
      （基本信息）真实姓名、性别、邮箱、出生日期、年龄、所在地、个人说明
      （教育信息）学校、专业、入学年份、学历
      （兴趣标签）标签1、标签2、标签3
      */
      locationTree: "",
      active: "0",
      addressInformation: [
        {
          id: "",
          grName: "",
          grPhone: "",
          grSpecificAddr: "",
          grProvinces: "",
          grPrefecture: "",
          grCity: "",
          status: "",
        },
      ],
      currentRow: null,
      titleVisable: false,
      nickname: {
        nicknameTemp: "",
      },
      basicVisable: false,
      basicInfoTemp: {
        userId: "",
        realNameTemp: "", //真实姓名
        sexTemp: "", //性别
        emailTemp: "", //邮箱
        birthdayTemp: "", //出生日期
        ageTemp: "", //年龄
        locationTemp: "", //所在地
        elucidationTemp: "", //个人简介
      },
      eduVisable: false,
      eduInfoTemp: {
        schoolTemp: "", //学校
        majorTemp: "", //专业
        enrollYearTemp: "", //入学年份
        eduBackGroundTemp: "", //学历
      },
      chAddressVisable: false,
      addAddressVisable: false,
      addAddressInfoTemp: {
        location: "",
        idTemp: "",
        grNameTemp: "",
        grPhoneTemp: "",
        grSpecificAddrTemp: "",
        grProvincesTemp: "",
        grPrefectureTemp: "",
        grCityTemp: "",
        statusTemp: "",
      },
      chAddressInfoTemp: {
        location: "",
        idTemp: "",
        grNameTemp: "",
        grPhoneTemp: "",
        grSpecificAddrTemp: "",
        grProvincesTemp: "",
        grPrefectureTemp: "",
        grCityTemp: "",
        statusTemp: "",
      },
      options: [
        {
          value: "本科以下",
          label: "本科以下",
        },
        {
          value: "本科",
          label: "本科",
        },
        {
          value: "研究生",
          label: "研究生",
        },
      ],
      sexOptions: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
      rules: {
        realNameTemp: [
          {
            validator: validateRealName,
            trigger: "blur",
          },
        ],
        sexTemp: [
          {
            validator: validateSex,
            trigger: "blur",
          },
        ],
        emailTemp: [
          {
            validator: validateEmail,
            trigger: "blur",
          },
        ],
        locationTemp: [
          {
            validator: validateLocation,
            trigger: "blur",
          },
        ],
        birthdayTemp: [
          {
            validator: validateBirthday,
            trigger: "blur",
          },
        ],
        ageTemp: [
          {
            validator: validateAge,
            trigger: "blur",
          },
        ],
        elucidationTemp: [
          {
            validator: validateElucidation,
            trigger: "blur",
          },
        ],
        nicknameTemp: [
          {
            validator: validateNickname,
            trigger: "blur",
          },
        ],
        schoolTemp: [
          {
            validator: validateSchool,
            trigger: "blur",
          },
        ],
        majorTemp: [
          {
            validator: validateMajor,
            trigger: "blur",
          },
        ],
        enrollYearTemp: [
          {
            validator: validateEnrollYear,
            trigger: "blur",
          },
        ],
        eduBackGroundTemp: [
          {
            validator: validateEduBackGround,
            trigger: "blur",
          },
        ],
        grNameTemp: [
          {
            validator: validateGrName,
            trigger: "blur",
          },
        ],
        grPhoneTemp: [
          {
            validator: validateGrPhone,
            trigger: "blur",
          },
        ],
        location: [
          {
            validator: validateLocationr,
            trigger: "blur",
          },
        ],
        grSpecificAddrTemp: [
          {
            validator: validateGrSpecificAddr,
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("login", ["user"]),
  },
  methods: {
    ...mapMutations("login", ["setUser"]),
    realNameInput(val) {
      let codeReg = new RegExp("[\u4E00-\u9FA5]+"), //正则 中文；
        len = val.length,
        str = "";
      for (var i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      this.basicInfoTemp.realNameTemp = str;
    },
    ageInput(val) {
      let codeReg = new RegExp("[0-9]+"), //正则 数字；
        len = val.length,
        str = "";
      for (var i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      this.basicInfoTemp.ageTemp = str;
    },
    schoolInput(val) {
      let codeReg = new RegExp("[\u4E00-\u9FA5]+"), //正则 中文；
        len = val.length,
        str = "";
      for (var i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      this.eduInfoTemp.schoolTemp = str;
    },
    majorInput(val) {
      let codeReg = new RegExp("[\u4E00-\u9FA5]+"), //正则 中文；
        len = val.length,
        str = "";
      for (var i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      this.eduInfoTemp.majorTemp = str;
    },
    grPhoneInput(val) {
      let codeReg = new RegExp("[0-9]+"), //正则 数字；
        len = val.length,
        str = "";
      for (var i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      this.addAddressInfoTemp.grPhoneTemp = str;
    },
    chGrPhoneInput(val) {
      let codeReg = new RegExp("[0-9]+"), //正则 数字；
        len = val.length,
        str = "";
      for (var i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      this.chAddressInfoTemp.grPhoneTemp = str;
    },
    //修改地址
    chAddress(value) {
      this.chAddressInfoTemp.idTemp = value.id;
      this.chAddressInfoTemp.grNameTemp = value.grName;
      this.chAddressInfoTemp.grPhoneTemp = value.grPhone;
      this.chAddressInfoTemp.grSpecificAddrTemp = value.grSpecificAddr;
      this.chAddressInfoTemp.grProvincesTemp = value.grProvinces;
      this.chAddressInfoTemp.grCityTemp = value.grCity;
      this.chAddressInfoTemp.grPrefectureTemp = value.grPrefecture;
      this.chAddressInfoTemp.statusTemp = value.status;
      this.chAddressInfoTemp.location = [];
      this.chAddressInfoTemp.location.push(value.grProvinces);
      if (value.grCity != "") {
        this.chAddressInfoTemp.location.push(value.grCity);
      }
      if (value.grPrefecture != "") {
        this.chAddressInfoTemp.location.push(value.grPrefecture);
      }
      this.chAddressVisable = true;
    },
    chAddressSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let param = new URLSearchParams();
          param.append("userId", this.user.userId);
          param.append("grId", this.chAddressInfoTemp.idTemp);
          param.append("grName", this.chAddressInfoTemp.grNameTemp);
          param.append("grPhone", this.chAddressInfoTemp.grPhoneTemp);
          param.append(
            "grSpecificAddr",
            this.chAddressInfoTemp.grSpecificAddrTemp
          );
          param.append("grProvinces", this.chAddressInfoTemp.location[0]);
          if (this.chAddressInfoTemp.location.length == 2) {
            param.append("grCity", this.chAddressInfoTemp.location[1]);
            param.append("grPrefecture", "");
          } else if (this.chAddressInfoTemp.location.length == 3) {
            param.append("grCity", this.chAddressInfoTemp.location[1]);
            param.append("grPrefecture", this.chAddressInfoTemp.location[2]);
          }
          console.log(this.chAddressInfoTemp);
          param.append("status", "0");
          api.chGoodsReceiveInfo(param).then((res) => {
            if (res.data == "1") {
              this.$message({
                message: "修改成功!",
                type: "success",
              });
              this.chAddressVisable = false;
              let param = new URLSearchParams();
              param.append("userId", this.user.userId);
              api.getGoodsReceiveInfo(param).then((res) => {
                this.addressInformation = res.data;
              });
            }
          });
        } else {
          return;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //新增地址
    addAddressSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let param = new URLSearchParams();
          param.append("userId", this.user.userId);
          param.append("grName", this.addAddressInfoTemp.grNameTemp);
          param.append("grPhone", this.addAddressInfoTemp.grPhoneTemp);
          param.append(
            "grSpecificAddr",
            this.addAddressInfoTemp.grSpecificAddrTemp
          );
          param.append("grProvinces", this.addAddressInfoTemp.location[0]);
          if (this.addAddressInfoTemp.location.length == 2) {
            param.append("grCity", this.addAddressInfoTemp.location[1]);
            param.append("grPrefecture", "");
          } else if (this.addAddressInfoTemp.location.length == 3) {
            param.append("grCity", this.addAddressInfoTemp.location[1]);
            param.append("grPrefecture", this.addAddressInfoTemp.location[2]);
          }
          param.append("status", "0");
          api.addGoodsReceiveInfo(param).then((res) => {
            console.log(res.data);
            if (res.data != "-1") {
              let param = new URLSearchParams();
              param.append("userId", this.user.userId);
              api.getGoodsReceiveInfo(param).then((res) => {
                this.addressInformation = res.data;
                this.$message({
                  message: "收货信息保存成功!",
                  type: "success",
                });
                this.addAddressVisable = false;
                this.resetForm("addAddressInfoTemp");
              });
            }
          });
        } else {
          return;
        }
      });
    },
    nicknameSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let param = new URLSearchParams();
          param.append("userId", this.user.userId);
          param.append("nickname", this.nickname.nicknameTemp);
          api.chNickname(param).then((res) => {
            if (res.data == "1") {
              this.$message({
                message: "昵称修改成功!",
                type: "success",
              });
              // this.user.nickname = this.nickname.nicknameTemp;
              this.titleVisable = false;
              this.localStorageSave();
            }
          });
        } else {
          return;
        }
      });
    },
    chBasicInfo() {
      this.basicVisable = true;
      this.basicInfoTemp.realNameTemp = this.user.realName;
      this.basicInfoTemp.sexTemp = this.user.sex;
      this.basicInfoTemp.emailTemp = this.user.email;
      this.basicInfoTemp.birthdayTemp = this.user.birthday;
      this.basicInfoTemp.ageTemp = this.user.age;
      this.basicInfoTemp.locationTemp = this.user.location;
      this.basicInfoTemp.elucidationTemp = this.user.elucidation;
    },
    basicInfoSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //保存基本信息
          let param = new URLSearchParams();
          param.append("userId", this.user.userId);
          param.append("realName", this.basicInfoTemp.realNameTemp);
          param.append("sex", this.basicInfoTemp.sexTemp);
          param.append("email", this.basicInfoTemp.emailTemp);
          param.append("birthday", this.basicInfoTemp.birthdayTemp);
          param.append("age", this.basicInfoTemp.ageTemp);
          param.append("location", this.basicInfoTemp.locationTemp);
          param.append("elucidation", this.basicInfoTemp.elucidationTemp);
          api.chBasicInfo(param).then((res) => {
            if (res.data == "1") {
              this.$message({
                message: "基本信息保存成功!",
                type: "success",
              });
              this.basicVisable = false;
              this.localStorageSave();
            }
          });
        } else {
          return;
        }
      });
    },
    chEduInfo() {
      this.eduVisable = true;
      this.eduInfoTemp.schoolTemp = this.user.school;
      this.eduInfoTemp.majorTemp = this.user.major;
      this.eduInfoTemp.enrollYearTemp = this.user.enrollYear;
      this.eduInfoTemp.eduBackGroundTemp = this.user.eduBackGround;
    },
    eduInfoSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let param = new URLSearchParams();
          param.append("userId", this.user.userId);
          param.append("school", this.eduInfoTemp.schoolTemp);
          param.append("major", this.eduInfoTemp.majorTemp);
          param.append("enrollYear", this.eduInfoTemp.enrollYearTemp);
          param.append("eduBackGround", this.eduInfoTemp.eduBackGroundTemp);
          api.chEduInfo(param).then((res) => {
            if (res.data == "1") {
              this.$message({
                message: "教育信息保存成功!",
                type: "success",
              });
              this.eduVisable = false;
              this.localStorageSave();
            }
          });
        } else {
          return;
        }
      });
    },
    removeAddress(index, value) {
      let param = new URLSearchParams();
      param.append("grId", value.id);
      api.delGoodsReceiveInfo(param).then((res) => {
        if (res.data == "1") {
          this.$message({
            message: "删除成功!",
            type: "success",
          });
          this.addressInformation.splice(index, 1);
        }
      });
    },
    Init() {
      //发送请求，初始化user列表
      let param = new URLSearchParams();
      param.append("userId", this.user.userId);
      //发送请求，初始化addressInformation列表
      api.getGoodsReceiveInfo(param).then((res) => {
        this.addressInformation = res.data;
        console.log(this.addressInformation);
      });
      this.locationTree = addressTree.locationTree;
    },
    localStorageSave() {
      let param = new URLSearchParams();
      param.append("userId", this.user.userId);
      api.getPersonalInfo(param).then((res) => {
        this.setUser(res.data);
        localStorage.setItem("shuXiang", JSON.stringify(res.data));
      });
    },
    handleBasicClose(done) {
      done();
      this.resetForm("basicInfoTemp");
    },
    handleNicknameClose(done) {
      done();
      this.resetForm("nickname");
    },
    handleEduClose(done) {
      done();
      this.resetForm("eduInfoTemp");
    },
    handleChAddressClose(done) {
      done();
      this.resetForm("chAddressInfoTemp");
    },
    handleAddAddressClose(done) {
      done();
      this.resetForm("addAddressInfoTemp");
    },
    //tset
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleClick(tab) {
      this.$router.push({
        path: "/message",
        query: {
          active: this.active,
        },
      });
    },
  },
  created() {
    this.Init();
    if (this.$route.query.active != "") {
      this.active = this.$route.query.active;
    }
  },
};
</script>

<style lang="less" scoped>
.message {
  border-radius: 4px;
  padding-bottom: 20px;
  width: 100%;
  min-height: 100%;
  overflow: auto;
  text-align: left;
  padding-left: 5%;
  padding-right: 5%;
  background-color: white;
  .security_content {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 10px auto 0px;
    // border: 1px solid #e1e2e5;
    // box-shadow: 0 2px 4px rgb(0 0 0 / 14%);
    background: white;
    border-radius: 4px;
    .security {
      float: left;
      width: 100%;
      height: 100%;
      overflow: hidden;
      .security-title {
        display: block;
        width: 100%;
        height: 25px;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        color: #99a2aa;
        cursor: default;
        // border: 1px solid #e1e2e5;
      }
      .userInfo .titleInfo {
        border-radius: 4px;
        .titleInfoTitle {
          font-size: 20px;
          text-align: left;
          padding: 5px 10px;
        }
        .titleInfoInner {
          position: relative;
          z-index: 1;
          padding-top: 16px;
          padding-bottom: 16px;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          .userTitle {
            margin: auto 0;
            width: 150px;
            display: inline-block;
            margin: 0 30px;
            text-align: left;
            font-weight: 700;
            line-height: 18px;
            font-size: 18px;
            vertical-align: middle;
          }
        }
      }
      .userInfo .accountInfo {
        // background-color: ;
        border-radius: 4px;
        ::v-deep .el-descriptions__title {
          font-size: 18px;
          font-weight: 700;
          margin-left: 10px;
          margin-top: 10px;
        }
        ::v-deep .el-descriptions__header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
        }
        ::v-deep .el-descriptions-item__label.is-bordered-label {
          width: 120px;
        }
        ::v-deep .el-descriptions-item__cell.el-descriptions-item__content {
          width: 333px;
        }
        ::v-deep .el-descriptions__body {
          color: #606266;
          background-color: #fff;
          margin: 10px 20px;
          font-size: 14px;
        }
      }
      .userInfo .basicInfo {
        // border: solid 1px #f0f0f2;
        border-radius: 4px;
        .basicDialog {
          .el-form {
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            flex-direction: row;
            flex-wrap: wrap;
            .el-form-item {
              cursor: pointer;
              -webkit-box-flex: 1;
              flex: 1 0 50%;
              font-size: 14px;
              margin-bottom: 18px;
            }
          }
        }
        ::v-deep .el-descriptions__title {
          font-size: 18px;
          font-weight: 700;
          margin-left: 10px;
          margin-top: 10px;
        }
        ::v-deep .el-descriptions__header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
        }
        ::v-deep .el-descriptions-item__label.is-bordered-label {
          width: 120px;
        }
        ::v-deep .el-descriptions-item__cell.el-descriptions-item__content {
          width: 333px;
        }
        ::v-deep .el-descriptions__body {
          color: #606266;
          background-color: #fff;
          margin: 10px 20px;
          font-size: 14px;
        }
      }
      .userInfo .eduInfo {
        // border: solid 1px #f0f0f2;
        border-radius: 4px;
        ::v-deep .el-descriptions__title {
          font-size: 18px;
          font-weight: 700;
          margin-left: 10px;
          margin-top: 10px;
        }
        ::v-deep .el-descriptions__header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
        }
        ::v-deep .el-descriptions-item__label.is-bordered-label {
          width: 120px;
        }
        ::v-deep .el-descriptions-item__cell.el-descriptions-item__content {
          width: 333px;
        }
        ::v-deep .el-descriptions__body {
          color: #606266;
          background-color: #fff;
          margin: 10px 20px;
          font-size: 14px;
        }
      }
      .userInfo .interInfo {
        // border: solid 1px #f0f0f2;
        border-radius: 4px;
        margin-bottom: 20px;
        .interInfoTitle {
          font-size: 20px;
          text-align: left;
          padding: 5px 10px;
          border-bottom: 1px solid #e1e2e5;
        }
      }
      .addressTable {
        .del .el-button--text:focus,
        .del .el-button--text:hover {
          color: red;
        }
        .el-table {
          margin-left: 0px !important;
          width: 90% !important;
        }
        ::v-deep .el-table .el-table__cell {
          padding: 10px 0;
        }
        ::v-deep .el-table__cell {
          height: 50px;
          font-size: 14px;
          border: 1px solid #ebeef5;
        }
        ::v-deep .cell {
          text-align: left;
          font-size: 14px;
        }
      }
      ::v-deep .el-tabs--left .el-tabs__item.is-left {
        text-align: center;
        width: 200px;
        height: 44px;
        font-size: 14px;
      }
    }
  }
}
</style>